<template>
	<view style="background: #ffffff;width: 100vw;height: 100vh;">
		<uni-nav-bar :fixed="true" :border="false" background-color="none" title=" " status-bar>
					<template v-slot:left>
						<up-icon @click="onClickLeft" name="arrow-left"  size="36rpx"></up-icon>
					</template>
				</uni-nav-bar>
		<view class="flex justify flex-down align-items" style="padding-top: 24rpx;">
			<image src="https://static-tool.77.top/static/login-logo.png" mode="aspectFill"
				style="width: 193rpx;height:193rpx"></image>
			<image src="https://static-tool.77.top/static/login-title.png" mode=""
				style="width: 316rpx;height: 48rpx;margin-top: 8rpx;"></image>
			<view class="kazu">
				登录后可收藏卡组，体验更多功能
			</view>
			<view style="font-weight:bold;color: #2E3033;text-align: center;font-size: 32rpx;margin-top: 90rpx;">手机验证码登录
			</view>
			<view class="inputs">
				<image src="@/static/image/ipone.png" mode="" style="width: 48rpx;height: 48rpx;margin: 0 32rpx;">
				</image>
				<input type="number" style="background: none;border: none; flex:1;" placeholder="请输入手机号码" v-model="phone" />
			</view>
			<view class="inputs" style="justify-content: space-between;">
				<image src="@/static/image/code.png" mode="" style="width: 48rpx;height: 48rpx;margin: 0 32rpx;">
				</image>
				<input type="number" style="background: none;border: none; flex:1;" @focus="codetype=true"  @blur="codetype=false" placeholder="请输入验证码" v-model="code" />
				<view class="codes" @click.stop="getCode()" :style="{ background: codetype ? '#FD8B00' : '' }">{{getCodeText}}</view>
			</view>
			<button class="buttons"  @click="getPhonelogin" :style="{ background: show ? '#FD8B00' : '' }" >登录</button>
			<view class="flex align-items" style="margin-top: 16rpx;">
				<image v-if="show==false" src="../../static/image/Component285.png" mode=""
					style="width: 24rpx;height:24rpx" @click="show=!show"></image>
				<image v-if="show==true" src="../../static/image/Frame1000008593.png" mode=""
					style="width: 24rpx;height:24rpx" @click="show=!show"></image>
				<view class="flex align-items" style="font-size: 20rpx;margin-left: 8rpx;">
					<view>我已同意同意 </view>
					<navigator url="service" style="color:#FD8B00">《Hearthstone用户协议》</navigator>和
					<navigator url="privacy" style="color:#FD8B00">《隐私政策》</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import request from "/http/index.js"
	import {
		onLoad,
		onReady,
		onUnload
	} from "@dcloudio/uni-app"
	onUnload(() => {
		clearInterval(Timer);
	})
	const getCodeText = ref('获取验证码')
	const getCodeisWaiting = ref(false)
	const phone = ref('')
	const code = ref('')
	const Timer = ref('')
	const show = ref(false)
	const codetype = ref(false)
	const onClickLeft = () => {
			uni.switchTab({
				url: '/pages/home/index'
			})
	}
	const getCode = () => {
		uni.hideKeyboard();
		if (getCodeisWaiting.value) {
			return;
		}
		const phoneRegex = /^1[3-9]\d{9}$/;
		if (!phoneRegex.test(phone.value)) {
			return uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			})
		}
		getCodeText.value = "发送中...";
		getCodeisWaiting.value = true;
		request({
			url: 'api/user/sendCode',
			method: 'post',
			data: {
				phone: phone.value
			}
		}).then(res => {
			if (res.code == 1) {
			     uni.showToast({
			     	title:'验证码已发送',
					icon:'none'
			     })
				 // code.value = res.phone_code
				setTimer();
			}else{
				uni.showToast({
					title:res.message || '操作失败！',
					icon:'none'
				})
			}
		})
		// setTimer();
	}
	const setTimer = () => {
		let holdTime = 59;
		getCodeText.value = "重新获取(60)";
		Timer.value = setInterval(() => {
			if (holdTime <= 0) {
				getCodeisWaiting.value = false;
				getCodeText.value = "获取验证码";
				clearInterval(Timer.value);
				return;
			}
			getCodeText.value = "重新获取(" + holdTime + ")";
			holdTime--;
		}, 1000);
	}
	 const getPhonelogin = () =>{
		 const phoneRegex = /^1[3-9]\d{9}$/;
		 if (!phoneRegex.test(phone.value)) {
		 	return uni.showToast({
		 		title: '请输入正确的手机号',
		 		icon: 'none'
		 	})
		 }
		 if (show.value == false) {
		 	return uni.showToast({
		 		title: '请阅读并同意Hearthstone相关协议',
		 		icon: 'none'
		 	})
		 }
		 request({
		 	url: 'api/user/loginCode',
		 	method: 'post',
		 	data: {
		 		phone: phone.value,
				code:code.value
		 	}
		 }).then(res => {
			 if(res.code == 1){
				uni.setStorageSync("token", res.data.userinfo.token)
				uni.setStorageSync("avatar", res.data.userinfo.avatar)
				uni.setStorageSync("username", res.data.userinfo.username)
				setTimeout(() => {
				     uni.switchTab({
				     	url:'/pages/home/index'
				     })
				}, 100)
			 }
			 if(res.code == 0){
				 uni.showToast({
				 	title: res.msg || '登录失败！',
				 	icon: 'none'
				 })
			 }
		 })
	 }
	 const blurcode =() =>{
	 }
</script>

<style scoped>
	.kazu {
		font-size: 24rpx;
		font-weight: 500;
		color: #7B7D80;
		margin-top: 24rpx;
	}

	.inputs {
		width: 686rpx;
		height: 100rpx;
		background: #F7F8FA;
		border-radius: 200rpx;
		margin-top: 32rpx;
		display: flex;
		align-items: center;

	}

	.codes {
		width: 200rpx;
		height: 64rpx;
		background: #FFBE70;
		border-radius: 200rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		line-height: 64rpx;
		margin-right: 16rpx;
	}
	.buttons {
		width: 686rpx;
		height: 96rpx;
		background: #FFBE70;
		border-radius: 88rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		line-height: 96rpx;
		margin-top: 168rpx;
	}
</style>